<div class="container-fluid">

  <div class="row">
    <event-nav (createClick)="create($event)" (itemClick)="goto($event)" (backClick)="back()"
               [needCreate]="needCreate" [tabModel]="tabModel"></event-nav>
  </div>

  <div class="row">
    <div id="accordion" role="tablist" aria-multiselectable="true">

      <div *ngFor="let session of items; let i = index" class="card">
        <div class="card-header no-border" role="tab" id="headingOne">
          <h5 class="mb-0">
            <span data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true"
               aria-controls="collapseOne">
              <span class="pointer">{{session.name}}</span>
              &nbsp;&nbsp;
              <i (click)="showModal(session, 'session', 'edit', $event);" class="ion-edit link"></i>
              <i (click)="showModal(session, 'session', 'alert', $event);" class="ion-trash-a link"></i>
              <i (click)="showModal(undefined, 'session', 'edit', $event);" class="ion-plus-round link"></i>
            </span>
          </h5>
        </div>

        <div id="collapseOne" class="collapse in" role="tabpanel" aria-labelledby="headingOne">
          <div class="card-block top0">
            <table class="table">
              <thead>
              <tr>
                <th>编号</th>
                <th>主题</th>
                <th>开始时间</th>
                <th>结束时间</th>
                <th>操作</th>
              </tr>
              </thead>
              <tbody>
              <tr *ngFor="let item of session.children; let j = index">
                <td scope="row">{{j+1}}</td>
                <td>{{item.subject}}</td>
                <td>{{item.startDatetime | date:'yyyy/MM/dd HH:mm'}}</td>
                <td>{{item.endDatetime | date:'yyyy/MM/dd HH:mm'}}</td>
                <td>
                  <i (click)="showModal(item, 'item', 'edit', $event)" class="ion-edit link"></i>
                  <i (click)="showModal(item, 'item', 'alert', $event);" class="ion-trash-a link"></i>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

<div bsModal #editPopup="bs-modal" class="modal fade" tabindex="-1" role="dialog"
     (onShown)="onEditModalShow()" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" (click)="hideModal('edit')" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 *ngIf="modelType == 'session'" class="modal-title">编辑会场</h4>
        <h4 *ngIf="modelType == 'item'" class="modal-title">编辑日程</h4>
      </div>
      <div class="modal-body">
        <div *ngIf="modelType == 'session'">
          <form [formGroup]="sessionForm" (ngSubmit)="onSessionFormSubmit()" class="my-validate-form">
            <div class="form-group row">

              <label class="col-sm-2 col-form-label">
                <span>会场名称</span>
              </label>
              <div class="col-sm-10">
                <input type="text" class="form-control" name="name" formControlName="name"
                       [(ngModel)]="item.name" #name>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-2 col-form-label">地址</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" name="address" formControlName="address"
                       [(ngModel)]="item.address" #address>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-2 col-form-label">
                <span>主持人</span>
              </label>
              <div class="col-sm-10">
                <input type="text" class="form-control" name="host" formControlName="host"
                       [(ngModel)]="item.host" #host>
              </div>
            </div>

            <div class="form-group row">
              <label class="col-sm-2 col-form-label"></label>
              <div class="col-sm-10">
                <button type="submit" class="btn btn-default" [disabled]="!sessionForm.valid">保存</button>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-2 col-form-label"></label>
              <div class="col-sm-10">
                <div class="validate-errors">
                  <div class="validate-error" *ngFor="let msg of sessionFormErrors">
                    <div>{{ msg }}</div>
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
        <div *ngIf="modelType == 'item'">
          <form [formGroup]="itemForm" (ngSubmit)="onItemFormSubmit()" class="my-validate-form">
            <div class="form-group row">

              <label class="col-sm-2 col-form-label">
                <span>主题</span>
              </label>
              <div class="col-sm-10">
                <input type="text" class="form-control" name="subject" formControlName="subject"
                       [(ngModel)]="item.subject" #subject>
              </div>
            </div>
<!--            <div class="form-group row">
              <label class="col-sm-2 col-form-label">
                <span>嘉宾</span>
              </label>
              <div class="col-sm-10">
                <input type="text" class="form-control" name="guest" formControlName="guest"
                       [(ngModel)]="item.guest" #host>
              </div>
            </div>-->

            <div class="form-group row">
              <label class="col-sm-2 col-form-label">开始时间</label>
              <div class="col-sm-5">
                <div class="input-group date">
                  <input readonly="readonly" type="text" class="form-control date-time" name="startDate"
                         formControlName="startDate"
                         [class.my-invalid]="itemForm.errors?.datetimeCompare"
                         [(ngModel)]="item.startDate" #startDate>
                  <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                </div>
              </div>
              <div class="col-sm-5">
                <div class="input-group bootstrap-timepicker timepicker">
                  <input readonly="readonly" type="text" class="form-control date-time" name="startTime"
                         formControlName="startTime"
                         [class.my-invalid]="itemForm.errors?.datetimeCompare"
                         [(ngModel)]="item.startTime" #startTime>
                  <span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
                </div>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-2 col-form-label">结束时间</label>
              <div class="col-sm-5">
                <div class="input-group date">
                  <input readonly="readonly" type="text" class="form-control date-time" name="endDate"
                         formControlName="endDate"
                         [class.my-invalid]="itemForm.errors?.datetimeCompare"
                         [(ngModel)]="item.endDate" #endDate>
                  <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                </div>
              </div>
              <div class="col-sm-5">
                <div class="input-group bootstrap-timepicker timepicker">
                  <input readonly="readonly" type="text" class="form-control date-time" name="endTime"
                         formControlName="endTime"
                         [class.my-invalid]="itemForm.errors?.datetimeCompare"
                         [(ngModel)]="item.endTime" #endTime>
                  <span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
                </div>
              </div>
            </div>

            <div class="form-group row">
              <label class="col-sm-2 col-form-label"></label>
              <div class="col-sm-10">
                <button type="submit" class="btn btn-primary" [disabled]="!itemForm.valid">保存</button>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-2 col-form-label"></label>
              <div class="col-sm-10">
                <div class="validate-errors">
                  <div class="validate-error" *ngFor="let msg of itemFormErrors">
                    <div>{{ msg }}</div>
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

<div bsModal #alertPopup="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" aria-label="Close" (click)="hideModal('edit')">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">确认删除?</h4>
      </div>
      <div class="modal-body">
        <div class="center">
          <button (click)="remove()" class="btn btn-primary btn-with-icon" type="button">
            <i class="ion-checkmark"></i>
            确认
          </button>
          &nbsp;&nbsp;&nbsp;
          <button (click)="hideModal('alert')" class="btn btn-default btn-with-icon" type="button">
            <i class="ion-close-round"></i>
            取消
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
